<template>
  <!-- <div class="all"> -->
  <div class="all" style="margin-bottom: 8px">
    <h1 style="color: white; margin-left: 7%">个人中心</h1>
    <el-container>
      <el-aside width="200px">
        <el-menu default-active="1" style="background-color: transparent">
          <el-menu-item index="1">
            <a href="#2">账户信息</a>
            <template #title> </template>
          </el-menu-item>
          <el-menu-item index="2">
            <a href="#2">订单信息</a> <template #title></template>
          </el-menu-item>
          <el-menu-item index="3">
            <a href="#3">评价管理</a> <template #title></template>
          </el-menu-item>
          <el-menu-item index="4">
            <a href="#4">关于我们</a> <template #title></template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main style="border: 3px solid white; margin-top: 3%; margin-left: 2%">
        <div
          style="
            width: 38%;
            height: 39%;
            border: 1px solid white;
            margin-left: 27%;
            margin-top: 1%;
          "
          id="2"
        >
          <img
            src="../../assets/vip.png"
            alt=""
            style="width: 19px; margin-left: 20%; margin-top: 0%; display: none"
            ref="vip"
          />
          <div @click="chargevipfirst">
            <img
              src="../../assets/novip1.png"
              alt=""
              style="
                width: 19px;
                margin-left: 20%;
                margin-top: 0%;
                display: none;
              "
              ref="novip"
            />
          </div>
          <div>
            <h1 style="width: 50%; margin-left: 17%; color: #a1bf39">
              用户名：{{ username }}
            </h1>
          </div>
          <div @click="changecover" style="margin-left: -71%; margin-top: -7%">
            <el-avatar :src="cover" :size="110"> </el-avatar>
          </div>
          <charge-vip ref="chargevip"></charge-vip>
          <chang-cover
            ref="changecover"
            @getchangecover="getchangecover"
          ></chang-cover>

          <ul
            style="
              list-style: none;
              margin-top: -9%;
              margin-left: 29%;
              width: 46%;
              height: 33%;
            "
          >
            <li style="float: left; margin-bottom: 1%; margin-right: 10%">
              <el-button type="success" circle @click="changeaddress()"
                ><el-icon><Position /></el-icon
              ></el-button>
            </li>
            <li style="float: left; margin-right: 10%">
              <el-button type="success" circle @click="changephone()"
                ><el-icon><Iphone /></el-icon
              ></el-button>
            </li>
            <li style="float: left; margin-right: 10%">
              <el-button type="success" circle @click="changeusername()"
                ><el-icon><User /></el-icon
              ></el-button>
            </li>
            <!-- <li style="float: left; margin-right: 13%;"><el-button  type="success" circle><el-icon><Position /></el-icon></el-button></li>
      <li style="float: left; margin-right: 13%;"><el-button  type="success" circle><el-icon><Position /></el-icon></el-button></li> -->
          </ul>
        </div>
        <div
          style="
            width: 38%;
            height: 39%;
            border: 1px solid white;
            margin-left: 27%;
            margin-top: 1%;
          "
        >
          <h1 style="color: white">订单信息</h1>
          <!-- <el-text class="mx-1" type="warning">待收货：{{ findstates.length }}</el-text> -->
          <el-badge
            :value="findstates.length"
            class="item"
            style="margin-top: 11%; width: 29%; height: 46%"
          >
            <el-button
              style="
                background-color: #67c23a;
                color: white;
                width: 86%;
                height: 73%;
              "
              @click="openunreceivelist()"
              >待收货</el-button
            >
          </el-badge>

          <el-badge
            :value="uncomments.length"
            class="item"
            style="margin-top: 11%; width: 29%; height: 46%"
          >
            <el-button
              style="
                background-color: #67c23a;
                color: white;
                width: 86%;
                height: 73%;
              "
              @click="openuncommentlist()"
              >待评价</el-button
            >
          </el-badge>
        </div>
        <div
          style="
            width: 38%;
            height: 39%;
            border: 1px solid white;
            margin-left: 27%;
            margin-top: 1%;
            overflow: auto;
            position: relative;
          "
          id="3"
        >
          <el-button
            style="
              background-color: #67c23a;
              color: white;
              position: absolute;
              margin-top: 19%;
              margin-left: -46%;
            "
            @click="advice()"
            >发表反馈</el-button
          >
          <h1 style="color: white">反馈区</h1>
          <div
            v-for="item in advises"
            :key="item.userId"
            style="width: 74%; margin-left: 26%"
          >
            <span
              style="
                margin-left: 24%;
                width: 75%;
                display: inline-block;
                text-align: left;
              "
              v-if="item.remark != null"
            >
              <li
                v-if="item.remark != null"
                style="
                  list-style: none;
                  width: 99%;
                  text-align: left;
                  margin-left: 0%;
                  height: 69%;
                "
              >
                <el-avatar :src="item.cover" v-if="item.remark != null">
                </el-avatar
                ><span style="color: white">{{ item.remark }}</span>
              </li>
            </span>
          </div>
        </div>
        <div
          style="
            width: 38%;
            height: 39%;
            border: 1px solid white;
            margin-left: 27%;
            margin-top: 1%;
          "
          id="4"
        >
          <el-scrollbar height="100%" style="background-color: #67c23aa6">
            <p style="color: white">
              旧天堂书店网上商城隶属于新华互联电子商务有限责任公司。
            </p>

            <p style="color: white">
              旧天堂书店互联电子商务有限责任公司成立于2015年10月20日，是由旧天堂书店总店联合全国各省市旧天堂书店共同出资，
            </p>
            <p style="color: white">
              以旧天堂书店网上商城的建设和运营为核心的高新技术企业。
            </p>

            <p style="color: white">公司围绕“立足文化 服务产业”的宗旨，</p>
            <p style="color: white">
              建立适应互联网与移动互联网时代环境的全品种、优质化的出版物发行电商平台，
            </p>
            <p style="color: white">
              形成线上营销和线下体验相结合的出版物发行新模式，努力成为具有核心竞争力的现代科技文化企业。
            </p>
          </el-scrollbar>
        </div>
      </el-main>
    </el-container>
    <change-address ref="changeaddress"></change-address>
    <change-phone ref="changephone"></change-phone>
    <change-user-name
      ref="changeusername"
      @changeusername="getusername()"
    ></change-user-name>
    <un-receive-list ref="url"></un-receive-list>
    <advice ref="advice" @findadvice="findadvises()"></advice>
    <un-comment-list ref="ucl" @close="getuncomments()"></un-comment-list>
    <personal-comment ></personal-comment>
  </div>
</template>
<script>
import ChargeVip from "./ChargeVip.vue";
import ChangCover from "./ChangCover.vue";
import ChangeAddress from "./ChangeAddress.vue";
import ChangePhone from "./ChangePhone.vue";
import ChangeUserName from "./ChangeUserName.vue";
import UnReceiveList from "./UnReceiveList.vue";
import Advice from "./Advice.vue";
import UnCommentList from "./UnCommentList.vue";
import PersonalComment from "./PersonalComment.vue";
export default {
  name: "PersonalPage",
  components: {
    ChangCover,
    ChargeVip,
    ChangeAddress,
    ChangePhone,
    ChangeUserName,
    UnReceiveList,
    Advice,
    UnCommentList,
    PersonalComment,
  },
  data() {
    return {
      cover: "",
      username: "",

      findstates: [],
      uncomments: [],
      userid: "",
      advises: [],
    };
  },
  methods: {
    //作用：默认拿去头像，例如刷新时；
    getcover() {
      var userid = sessionStorage.getItem("userId");
      var data = new FormData();
      data.append("userId", userid);
      this.$axios.post("/getcover", data).then((resp) => {
        if (resp.status == 200) {
          console.log(resp.data);
          this.cover = resp.data;
        }
      });
    },
    //作用：用户更换头像后渲染到页面上
    getchangecover() {
      this.$axios.get("/getchangecover").then((resp) => {
        this.cover = "http://101.33.228.125:8776/" + resp.data;

        console.log("执行了主页的getchangecover方法");
      });
    },
    //作用：显示头像上传框并识别哪位用户换头像
    changecover() {
      this.$refs.changecover.centerDialogVisible = true;
      var userid = sessionStorage.getItem("userId");
      var data = new FormData();
      data.append("userId", userid);
      this.$axios.post("/getuserId", data).then((resp) => {});
    },
    getvip() {
      var userid = sessionStorage.getItem("userId");
      var data = new FormData();
      data.append("userId", userid);
      this.$axios.post("/getvip", data).then((resp) => {
        if (resp.data == 0) {
          this.$refs.novip.style.display = "block";
        } else {
          this.$refs.vip.style.display = "block";
        }
      });
    },
    chargevipfirst() {
      this.$refs.chargevip.centerDialogVisible = true;
    },
    getusername() {
      var userid = sessionStorage.getItem("userId");
      var data = new FormData();
      data.append("userId", userid);
      this.$axios.post("/getusername", data).then((resp) => {
        this.username = resp.data;
      });
    },
    findstate() {
      this.userid = sessionStorage.getItem("userId");
      var data = new FormData();
      data.append("userid", this.userid);
      this.$axios.post("/findstate", data).then((resp) => {
        this.findstates = resp.data;

        console.log("待收货" + this.findstates.length);
      });
    },
    getuncomments() {
      this.userid = sessionStorage.getItem("userId");
      var data = new FormData();
      data.append("userid", this.userid);
      this.$axios.post("/getuncomments", data).then((resp) => {
        this.uncomments = resp.data;
      });
    },
    changeaddress() {
      this.$refs.changeaddress.centerDialogVisible = true;
    },
    changephone() {
      this.$refs.changephone.centerDialogVisible = true;
    },
    changeusername() {
      this.$refs.changeusername.centerDialogVisible = true;
    },
    openunreceivelist() {
      this.$refs.url.centerDialogVisible = true;
    },
    advice() {
      this.$refs.advice.centerDialogVisible = true;
    },
    findadvises() {
      this.$axios.get("/findadvises").then((resp) => {
        console.log(resp.data);
        this.advises = resp.data;
      });
    },
    openuncommentlist() {
      this.$refs.ucl.centerDialogVisible = true;
    },
  },
  mounted: function () {
    this.getcover(), this.getvip();
    this.getusername();
    this.findstate();
    this.getuncomments();
    this.findadvises();
  },
};
</script>
<style scoped>
.all {
  width: 100%;
  height: 88%;
  /* background-color: rgb(0, 0, 0); */
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../../assets/5.jpg);
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>